<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Head -->
<head>
    <meta charset="utf-8"/>
    <title>${session.SOFT_NAME }_智能办公系统</title>
    <meta name="description" content="Dashboard"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <%include("/app/resapi/style.html"){}%>
    <link href="/module/zepto/css/iconfont.css" rel="stylesheet" type="text/css">
    <link href="/module/zepto/css/style.css" rel="stylesheet" type="text/css">
    <link href="/module/zepto/style.css" rel="stylesheet" type="text/css">
    <style>
        .contact-info > p {
            margin: 10px;
            font-size: 14px;
        }

        .profile-badge > span {
            margin: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body style="overflow-y: hidden;">
<div style="overflow-y: auto; display: inline-block; height: 100%; width: 200px; padding-top: 10px; text-align: center; background: #FFF; float: left">
    <input type="text" class="form-control" id="queryfield" placeholder="按姓名,电话,邮箱查询">
    <div class="btn-group" style="display: inline-block;" align="center">
        <a class="btn btn-blue" href="javascript:void(0);">更多</a> <a class="btn btn-blue  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" aria-expanded="false"><i
            class="fa fa-angle-down"></i></a>
        <ul class="dropdown-menu dropdown-blue">
            <li><a href="javascript:void(0);" onclick="createaddressbook();">新建联系人</a></li>
            <li><a href="javascript:void(0);" onclick="importaddressbook();">导入联系人</a></li>
        </ul>
    </div>
    <button type="submit" class="btn btn-blue js-query" style="background-color: #a0d468 !important; border-color: #a0d468; margin-top: 5px; margin-bottom: 5px; color: white; display: inline-block;">${i18n('system.search')}</button>
    <ul class="menu">
        <li class="item" id="profile"><a href="#profile" class="btn" style="text-align: left;"><i class="glyphicon glyphicon-user"></i>我的分组</a>
            <div class="smenu" id="mygroup">
            </div>
        </li>
        <li class="item" id="messages"><a href="#messages" class="btn" style="text-align: left;"><i class="fa fa-users"></i>我的同事</a>
            <div class="smenu" id="myfriend">
            </div>
        </li>
        <li class="item" id="settings"><a href="#settings" class="btn" style="text-align: left;"><i class="glyphicon glyphicon-send"></i>他人共享</a>
            <div class="smenu" id="myshare">
            </div>
        </li>
    </ul>
</div>
<div style="overflow-y: auto; display: inline-block; height: 100%; width: 350px; background: #FFF; float: left" id="list">
    <div id="showLetter" class="showLetter">
        <span>A</span>
    </div>
    <div class="letter">
        <ul>
            <li><a href="javascript:;">A</a></li>
            <li><a href="javascript:;">B</a></li>
            <li><a href="javascript:;">C</a></li>
            <li><a href="javascript:;">D</a></li>
            <li><a href="javascript:;">E</a></li>
            <li><a href="javascript:;">F</a></li>
            <li><a href="javascript:;">G</a></li>
            <li><a href="javascript:;">H</a></li>
            <li><a href="javascript:;">J</a></li>
            <li><a href="javascript:;">K</a></li>
            <li><a href="javascript:;">L</a></li>
            <li><a href="javascript:;">M</a></li>
            <li><a href="javascript:;">N</a></li>
            <li><a href="javascript:;">P</a></li>
            <li><a href="javascript:;">Q</a></li>
            <li><a href="javascript:;">R</a></li>
            <li><a href="javascript:;">S</a></li>
            <li><a href="javascript:;">T</a></li>
            <li><a href="javascript:;">W</a></li>
            <li><a href="javascript:;">X</a></li>
            <li><a href="javascript:;">Y</a></li>
            <li><a href="javascript:;">Z</a></li>
            <li><a href="javascript:;">#</a></li>
        </ul>
    </div>

    <div class="container" style="width: 300px;">
        <div class="city">
        </div>
    </div>
</div>
<div style="float: left;width:700px;margin-left: 10px;">
    <div class="tab-content tabs-flat">
        <div id="contacts" class="tab-pane active">
            <div class="row">
                <div class="col-md-12">
                    <div class="profile-contacts">
                        <div class="profile-badge orange">
                            <i class="fa fa-exclamation-circle orange"></i><span>基本信息</span>
                        </div>
                        <div class="contact-info">
                            <p>
                                姓名 : <span id="iUserName"></span>
                            </p>
                            <p>
                                部门 : <span id="iDeptName"></span>
                            </p>
                            <p>
                                职务 : <span id="iUserPost"></span>
                            </p>
                            <p>
                                类型 : <span id="iBookType"></span>
                            </p>
                        </div>
                        <div class="profile-badge orange">
                            <i class="fa fa-phone orange"></i><span>联系方式</span>
                        </div>
                        <div class="contact-info">
                            <p>
                                电话 : <span id="iTel"></span>
                            </p>
                            <p>
                                手机号 : <span id="iMobileNo"></span>
                            </p>
                            <p>
                                邮件 : <span id="iEmail"></span>
                            </p>
                        </div>
                        <div class="profile-badge azure">
                            <i class="fa fa-map-marker azure"></i><span>通讯地址</span>
                        </div>
                        <div class="contact-info">
                            <p>
                                <span id="iAddress"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" id="createdivmodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myLargeModalLabel">创建联系人</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form-bordered" role="form" id="form1">
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">${i18n('system.sortNo')}：</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" name="sortNo" id="sortNo" placeholder="${i18n('system.sortNo')}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">姓名：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="userName" name="userName" placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">类型：</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="bookType" name="bookType" style="border-radius: 0px;">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">部门：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="deptName" name="deptName" placeholder="部门">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">职务：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="userPost" name="userPost" placeholder="职务">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">电话：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="tel" name="tel" placeholder="电话">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">手机号：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="mobileNo" name="mobileNo" placeholder="手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">邮箱：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="email" name="email" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">地址：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="address" name="address" placeholder="地址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">共享：</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="isShare" name="isShare" style="border-radius: 0px;">
                                <option value="0">私有</option>
                                <option value="1">共享</option>
                            </select>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal" style="display: inline;">${i18n('cancel')}</button>
                <button type="button" class="btn btn-primary js-save" style="display: inline;">${i18n('save')}</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="modal fade bs-example-modal-sm in" id="exdiv" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content modal-sm">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myLargeModalLabel">通讯录入</h4>
            </div>
            <div class="modal-body">
                <div id="horizontal-form">
                    <form class="form-horizontal" role="form" id="form1">
                        <div class="form-group" align="center">
                            <a href="/datatemple/通讯录.xlsx" class="btn btn-darkorange" style="display: inline;">下载模版</a>
                            <a href="javascript:void(0);" class="btn btn-palegreen" style="margin-left: 20px;display: inline;">导入模版 <input id="file" name="file"
                                                                                                                                           type="file" onchange="importAddressBookForExcel();" hidefocus="true" size="1" class="addfile" accept=".xls,.xlsx">
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<%include("/app/resapi/sysjs.html"){}%>
<script type="text/javascript" src="/module/zepto/zepto.js"></script>
<script type="text/javascript" src="/gobal/js/page/addressbook/addressbook.js">
</script>
</body>
</html>
